<script setup lang="ts">
import { useRequest } from 'vue-request'
import { getCurrentCityAPI } from '@/apis/getCurrentCity'
import citys from '@/static/data/citys_grouped_by_alphabet.json'
import { useBeforeOrderStore } from '@/store/beforeOrder'

const router = useRouter()
const beforeOrderStore = useBeforeOrderStore()

const searchText = ref('')

const { data: ipCityData, loading, refreshAsync } = useRequest(getCurrentCityAPI)

async function getCurrentCity() {
  await refreshAsync()
  uni.showToast({ title: '更新成功' })
}

function selectCity(city: string) {
  beforeOrderStore.city = city
  router.back()
}
</script>

<template>
  <uv-index-list inactive-color="#333333" active-color="#3F8BF6" :sticky="false">
    <template #header>
      <view class="sticky left-0 top-0 w-screen px-24rpx py-30rpx">
        <SearchBar :value="searchText" scene="changeCity" placeholder="请输入城市名称" />
      </view>
      <!-- 当前位置卡片 -->
      <view class="relative mx-24rpx h-160rpx w-702rpx" @tap="ipCityData?.data?.city ? selectCity(ipCityData.data.city) : undefined">
        <image
          class="absolute left-0 top-0 h-160rpx w-702rpx"
          src="@/static/images/current_location_bg.png"
        />
        <view class="absolute bottom-0 left-0 right-0 top-0 z-10 flex flex-col justify-between px-30rpx py-37rpx">
          <view class="text-28rpx text-#333333 font-medium leading-28rpx">
            当前位置
          </view>
          <view class="flex items-center justify-between">
            <view v-if="loading" class="flex items-center">
              <image
                class="h-30rpx w-30rpx animate-spin"
                src="@/static/images/loading.png"
              />
              <Spacer width="12" />
              <view class="text-28rpx text-#333333 font-medium leading-28rpx">
                加载中...
              </view>
            </view>
            <view v-else class="flex items-center">
              <image
                class="h-30rpx w-24rpx"
                src="@/static/images/mark_blue.png"
              />
              <Spacer width="12" />
              <view class="text-28rpx text-#333333 font-medium leading-28rpx">
                {{ ipCityData?.data?.city }}
              </view>
            </view>
            <view class="flex items-center" @tap.stop="getCurrentCity">
              <image
                class="h-28rpx w-32rpx"
                src="@/static/images/refresh.png"
              />
              <Spacer width="8" />
              <view class="text-24rpx text-black font-medium leading-24rpx">
                重新定位
              </view>
            </view>
          </view>
        </view>
      </view>
      <Spacer height="16" />
    </template>
    <template v-for="item in citys" :key="item.title">
      <uv-index-item>
        <uv-index-anchor :text="item.title" color="#3F8BF6" size="32rpx" bg-color="rgba(0, 0, 0, 0)" height="80rpx" />
        <view class="mx-24rpx overflow-hidden rounded-20rpx bg-white">
          <block v-for="cell, index in item.lists" :key="cell">
            <view class="px-30rpx py-40rpx" @tap="selectCity(`${cell}市`)">
              {{ cell }}
            </view>
            <Divider v-if="index !== item.lists.length - 1" width="642" />
          </block>
        </view>
      </uv-index-item>
    </template>
  </uv-index-list>
</template>

<route lang="yaml">
name: 'changeCity'
style:
  navigationBarTitleText: '切换城市'
</route>
